<template>
  <div class="sort-wrap">
    <div class="fixed header-wraper" style="z-index: 10">
      <van-search
        left-icon="wap-nav"
        placeholder="请输入搜索关键词"
        background="rgba(0,0,0,0)"
        v-model="value"
        show-action
        :background="navBg ? '#e1251b' : 'transparent'"
      >
      <div slot="action" @click="onSearch">搜索</div>
      </van-search>
    </div>
    <div class="header-swipe">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(item, index) in swipeImage" :key="index">
          <img class="swipeimage" v-lazy="item.image" style="width: 100%;" />
        </van-swipe-item>
      </van-swipe>
    </div>
      <van-tabs v-model="IndexActive" :swipe-threshold="5" sticky :z-index="2" :offset-top="54" @change="indexTabsSwitch(0)">
        <van-tab title="首页"> 
        
            <!-- start banner 广告 -->
        <div style="width: 100%;">
          <div class="banner-swipe">
            <van-swipe :autoplay="3000">
              <van-swipe-item v-for="(item, index) in adImage" :key="index">
                <img class="banner-swipeimage" v-lazy="item.image"  style="width: 100%;" />
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
        <!-- end banner 广告 -->
        <!-- start 每日特价 -->
        <van-cell title="每日特价" value="更多" is-link />
        <div style="background-color: #e5e5e5;padding: 10px 7px 5px; " v-if="discount">
          <Goods :data="discount.data" @getDetail="getDetails" />
        </div>
              
         
        <!-- end 每日特价 -->
        <!-- start 最新上线 -->


        <van-cell title="最新上线" value="更多" is-link />
        <div style="background-color: #e5e5e5;padding: 10px 7px 5px; " v-if="hot">
          <rous3_Goods :data="hot" @getDetail="getDetails" />
        </div>

        <!-- End 最新上线 -->


      <van-cell title="畅销商品" value="更多" is-link />
      <div style="background-color: #e5e5e5;padding: 10px 7px 5px; " v-if="discount.length != 0">
        <Goods :data="discount.data" @getDetail="getDetails" />
      </div>

        <!-- end 畅销商品 -->
            
        
        </van-tab>
        <van-tab v-for="(item,index) in IndexTopMenu" :key="index" :title="item.title" style="padding: 10px;">
          <van-list v-model="IndexTopNavloading" :finished="IndexTopNavfinished" finished-text="没有更多了" @load="onIndexTopNavLoad">
              <Goods :data="IndexTopMenuData.data" :load="false" :type="0" @getDetails="getDetails" />
          </van-list>
          <Goods :data="item.good" :load="false" :type="0" @getDetails="getDetails" />
        </van-tab>
        <van-tab title=" "> </van-tab>
         <div slot="default" class="TabsMore">
          <span @click="getSortMore"><van-icon name="wap-nav" style="vertical-align: middle" id="Indextabs" /> 分类 </span>
         </div>
      </van-tabs>



    
    <copyright />
    <c-footer />
  </div>
</template>

<script>
import storeGoods from '@/components/storeGoods'
import copyright from '@/components/copyright'
import Goods from '@/common/goods/index.vue';
import rous3_Goods from '@/common/goods/3_rows.vue';
export default {
  name: "Sort",
  data() {
    return {
      swipeImage: [],
      adImage:[],
      active: '0',
      value: '',
      discount:[],
      hot:[],
      specialty: [],
      goods:null,
      IndexTopMenu:[],
      IndexTopMenuPage: 1,
      IndexActive: 0,
      is_indexFixed: false,
      navBg: false,
      IndexTopNavloading: false,
      IndexTopNavfinished: false,
      IndexTopMenuData: {
        data:[]
      },
    };
  },
  mounted(){
    this.getData();
    this.IndexTopMenu = this.$store.state.categoryData;
    window.addEventListener('scroll', this.scrollToTop);
    this.getSwiperData()
  },
  methods:{
    getSwiperData() {
        this.axios.get('/api/store/user/swiper/StoreOfficialSwipe', {
            token: this.accessToken
        }).then(result => {
          this.swipeImage = result.data.data;
        })
        this.axios.get('/api/store/user/swiper/StoreOfficialBanner', {
            token: this.accessToken
        }).then(result => {
          this.adImage = result.data.data;
        })
    },
    getData(){
       this.axios.get('/api/store/official/discount?token='+this.global.state.accessToken  || sessionStorage.getItem("token"))
      .then(res=>{
        this.discount = res.data.data
      }).catch(err=>err)

      this.axios.get('/api/store/official/hot?token='+this.global.state.accessToken || sessionStorage.getItem("token"))
      .then(res=>{
        this.hot = res.data.data
        }).catch(err=>err)

      this.axios.get('/api/store/official/discount?token='+this.global.state.accessToken || sessionStorage.getItem("token"))
      .then(res=>{
        this.discount = res.data.data
      }).catch(err=>err)

      this.axios.get('/api/store/official/specialty?token='+this.global.state.accessToken || sessionStorage.getItem("token"))
      .then(res=>{
        this.specialty = res.data.data
      }).catch(err=>err)
    },
    indexTabsSwitch(e) {
        if (e == 1) return;
        this.topNavLastPage = null;
        this.IndexTopMenuPage = 1;
        this.IndexTopNavfinished = false;
        this.getTopNavMenuData();
        document.documentElement.scrollTop = 0;
    },
    onIndexTopNavLoad(){
       this.getTopNavMenuData();
    },
    getDetails(e){
      this.global.state.productStore_goods = e;
      this.$router.push({name:'productStore',path:'../product/store'})
    },
    getSortMore(){
      this.$router.push({path:'../store/list'})
    },
    scrollToTop(){
      // 首页Toptabs滑动
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
       if(scrollTop > 44){
          this.is_indexFixed = true;
          this.navBg = true
        }else {
          this.is_indexFixed = false;
          this.navBg = false
        }
    },
    getTopNavMenuData() {
            if(this.IndexActive == 0)return;
            let params = {};
            params.token = sessionStorage.getItem("token");
            params.page = this.IndexTopMenuPage;
            if (this.topNavLastPage == null || this.IndexTopMenuPage <= this.topNavLastPage) {
                let url = '/api/store/index/data/' + this.IndexTopMenu[this.IndexActive - 1].id;
                this.axios.get(url, {
                    params
                }).then(res => {
                    this.IndexTopNavloading = false;
                    let data = [];
                    this.topNavLastPage = res.data.data.last_page;
                    this.IndexTopMenuPage = res.data.data.current_page + 1;
                    if (res.data.data.data && res.data.data.current_page == 1) {
                        this.IndexTopMenuData = res.data.data;
                    } else {
                        data = [...this.IndexTopMenuData.data, ...res.data.data.data];
                        this.IndexTopMenuData.data = data;
                    }
                })
            } else {
                this.IndexTopNavloading = false;
                this.IndexTopNavfinished = true;
            }
        },
        onSearch(){
          if(this.value == null){
            Toast('请输入搜索内容');
          }else {
            this.$router.push({path:'/search',query:{value:this.value}})
          }
        }
  },
  components:{
    copyright,
    storeGoods,
    rous3_Goods,
    Goods
  },
  beforeDestroy(){
      window.removeEventListener('scroll', this.scrollToTop ,false);
  }
};
</script>
<style lang="less" scoped>
.sort-wrap {
  padding-bottom: 50px;
  .sort {
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    .item {
      padding: 5px 0;
      text-align: center;
      width: 25%;
      p {
        font-size: 14px;
        margin: 0.25rem 0 0;
        overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.plank-header {
   padding: 0 7px;
}
.TabsMore {
  position: absolute;
  top: 0;
  right: 5px;
  bottom: 0;
  line-height: 44px;
  height: 44px;
  background: #fff;
  color: white;
}
.TabsMore span {
  padding: 5px;
  border-radius: 10px;
  background: #ed6a0c;
}
.is_topbar_fixed {
  position: fixed;
  top: 54px;
  left: 0;
  right: 0;
  padding: 0;
  z-index: 99
}

</style>



